<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
<title>会员余额充值</title>
<%@include file="../collect/meta.jsp"%>
<link rel="stylesheet" href="css/radius.css" type="text/css"></link>
<script type="text/javascript" src="${ctx}/js/returnTop.js"></script>
</head>
<body lang="zh-cn">
	<div class="wrapper">
		<c:import url="/muser/musertop.jsp"></c:import>
		<div class="main-container" id="main-container">
			<div class="main-container-inner">
				<c:import url="/muser/muserleft.jsp"></c:import>
				<div class="main-content">
					<div class="breadcrumbs" id="breadcrumbs">
						<ul class="breadcrumb">
							<li><i class="icon-home home-icon"></i>余额充值</li>
						</ul>
					</div>
					<div class="page-content">
						<div class="row">
							<div class="col-xs-12">
								<fieldset>
									<legend align="center">会员信息</legend>
									<div align="center">
										<table border="0" cellspacing="1" cellpadding="3">
											<tr>
												<td><div align="right">手&nbsp;机&nbsp;号:</div>
												</td>
												<td><input type="hidden" name="member.mobile"
													value="${member.mobile }" id="memberMobile" />${member.mobile
													}</td>
											</tr>
											<tr>
												<td><div align="right">姓&nbsp;&nbsp;&nbsp;&nbsp;名:</div>
												</td>
												<td><c:if test="${not empty member.name }">
			                                  			${member.name }
			                                  		</c:if>
												</td>
											</tr>
											<tr>
												<td><div align="right">性&nbsp;&nbsp;&nbsp;&nbsp;别:</div>
												</td>
												<td><c:if test="${not empty member.sex }">
			                                  			${member.sex }
			                                  		</c:if>
												</td>
											</tr>
											<tr>
												<td><div align="right">注册时间:</div>
												</td>
												<td>${fn:substring(member.createTime, 0,
													fn:indexOf(member.createTime, "."))}</td>
											</tr>
											<tr>
												<td><div align="right">会员积分:</div>
												</td>
												<td>${fn:substring(baseMember.score, 0,
													fn:indexOf(baseMember.score, ".0"))}</td>
											</tr>
											<tr>
												<td><div align="right">会员等级:</div>
												</td>
												<td>${baseMember.level}</td>
											</tr>
											<tr>
												<td><div align="right">会员余额:</div>
												</td>
												<td><input type="hidden" id="balance"
													name="baseMember.balance" value="${baseMember.balance}" />
													${baseMember.balance}</td>
											</tr>
											<input type="hidden" name="member.id" value="${member.id }" />
											<input type="hidden" name="baseMember.id"
												value="${baseMember.id }" />
											<input type="hidden" name="shop.id" value="${shop.id }" />
										</table>
									</div>
									<br />
									<legend align="center" style="font-weight: bold;">支付宝充值</legend>
									<div align="center">
										<table border="0" cellspacing="1" cellpadding="3">
											<tr>
												<td align="right">充值金额：</td>
												<td>
													<select name="goodId" id="goodId">
														<option value="0">-- 请选择金额 --</option>
														<c:forEach items="${tariffs }" var="tariff">
															<option value="${tariff.goods.goodsId }">${tariff.goods.goodsName }</option>
														</c:forEach>
													</select>
												</td>
											</tr>
											<tr>
												<td colspan="2" align="center">
													<button type="button" class="btn btn-primary radius" id="but">确定</button>
													<a class="btn btn-primary radius" id="ret" href="member!seekMember?member.mobile=${member.mobile }&seekType=balance">返回</a>
												</td>
											</tr>
											<tr>
												<td colspan="2" align="center">
													<br/>
													<img alt="" src="" id="qrcodeImg">
												</td>
											</tr>
										</table>
									</div>
								</fieldset>
							</div>
							<!-- /.col -->
						</div>
						<!-- /.row -->
					</div>
					<!-- /.page-content -->
				</div>
				<!-- /.main-content -->
			</div>
			<!-- /.main-container-inner -->
			<a href="#" id="btn-scroll-up"
				class="btn-scroll-up btn btn-sm btn-inverse"
				style="position:fixed;bottom:0;"> <i
				class="icon-double-angle-up icon-only bigger-110"></i> </a>
		</div>
		<!-- /.main-container -->
		<div class="push"></div>
	</div>
	<c:import url="/collect/down.jsp"></c:import>

	<script type="text/javascript">
		$(document).ready(function() {
			$('.mbalance > a').css("color", "red");
			
			$("#but").click(function(){
				var goodId = $("#goodId").val();
				if (goodId == "0") {
					alert("请选择充值金额！");
					return false;
				}
				
				var memberId = $("input[name='member.id']").val();
				var shopId = $("input[name='shop.id']").val();
				var url = "mbalance!createAlipayBalance?goodId=" + goodId + "&member.id=" + memberId + "&shop.id=" + shopId;
				
				$("#but").attr("disabled", true);
				$("#ret").attr("disabled", true);
				
				$.ajax({
					url : url,
					type : "post",
					datatype : "json",
					success : function(data) {
						var d = jQuery.parseJSON(data);
						$("#qrcodeImg").attr("src", d.qrcodeImgUrl);
						$("#but").attr("disabled", false);
						$("#ret").attr("disabled", false);
					},
					error : function(request) {
						alert("Connection error");
					}
				});
				
			});
		});
	</script>
</body>
</html>